<template>
	<view>
		<view class="newsdetails" v-if="infoList.video!== ''">
			<view class="newsdetails-bg">
				<video :src="infoList.video" controls autoplay style="width: 100%;height: 410rpx;">
				</video>
			</view>
		</view>
		<view class="newsdetails-cont bg-white">
			<view class="title fbox fbox-start fbox-jbetween">
				<text>{{infoList.title}}</text>
			</view>
			<view class="time-eye f28 fbox fbox-acenter fbox-jbetween">
				<view class="">
					{{infoList.time}} {{infoList.from}}
				</view>
				<view class="f26 fbox fbox-acenter">
					<image style="width: 32rpx;" src="/static/mu.png" mode="widthFix"></image>
					<text>{{infoList.showNum}}</text>
				</view>
			</view>
			<u-parse class="parse" :html="infoList.content" @linkpress="onlinkTap"></u-parse> 
		</view>
		<report :id="infoList.id"></report>
		<likes type="news" :isLike="infoList.isLike" :id="id" :likeAvatars="infoList.likeAvatars" @init="init"
			:likeNum="infoList.likeNum"></likes>
		<opinion :opinioninfo="opinioninfo" :thumbup="thumbup" :id="id" :thumbdown="thumbdown" @init="getopinion">
		</opinion>
		<zero-back-top :scrollTop="scrollTop"></zero-back-top>
		<comments type="news" class="comments" :id="id" @init="getcomment" :commentList="commentList" @getcomment="getcomment"></comments>
		<tabbar type="news" :top="top" :commentlength="commentList.length" :isLike="infoList.isLike"
			:isCollection="infoList.isCollection" @init="init" :id="id" :likeNum="infoList.likeNum"></tabbar>
		<u-modal :show="show" :cancelText="cancelText" @confirm="confirm" @cancel="cancel"  :confirmText="confirmText" :title="title" :showCancelButton="true"  :content='content'></u-modal>
	</view>
</template>

<script>
	import report from "@/components/report.vue"
	import likes from "@/components/likes.vue"
	import comments from "@/components/comments.vue"
	import tabbar from "@/components/tabbar.vue"
	import opinion from "@/components/opinion.vue"
	export default {
		components: {
			report,
			likes,
			comments,
			tabbar,
			opinion
		},
		data() {
			return {
				show:false,
				mask: false,
				mask1: false,
				cancelText:this.$t('user.cancel'),
				confirmText:this.$t('user.yes'),
				infoList: {},
				likes: {},
				commentList: [],
				prevImagesList: [],
				id: '',
				opinioninfo: {},
				thumbup: '50',
				thumbdown: '50',
				top: 0,
				content:this.$t('user.open'), 
				scrollTop:0,
				title:this.$t('user.prompt'),
				urllinks:''
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onLoad(option) {
			this.id = option.id
			this.init()
			this.getcomment()
			this.getopinion()
		},
		mounted() {
			this.onheight()
		},
		methods: {
			onheight() {
				let that = this;
				const query = uni.createSelectorQuery().in(this);
				query.select('.comments').boundingClientRect(data => {
					console.log("得到布局位置信息" + JSON.stringify(data));
					that.top = data.top + 100
					console.log(that.top)
				}).exec();
			},
			cancel(){
				this.show = false
			},
			onlinkTap(e) {
				e.ignore()
				console.log(e)
				this.show = true
				this.urllinks = e.href
			},
			confirm(){
				this.show = false
				plus.runtime.openURL(this.urllinks)
			},
			getcomment() {
				const params = {
					map: 'applet_comment_list',
					aid: this.id
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					console.log(res)
					if (res.data.ec == 200) {
						this.commentList = res.data.data
					} else {

					}
				})
			},
			init() {
				const params = {
					map: 'applet_applet_information_details',
					id: this.id
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					console.log(res)
					if (res.data.ec == 200) {
						this.infoList = res.data.data
					} else {

					}
				})
			},
			getopinion() {
				const params = {
					map: 'applet_information_support_get',
					aid: this.id
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						console.log(res, 'opinion')
						this.opinioninfo = res.data.data
						let num = Number(this.opinioninfo.ai_support_no_num) + Number(this.opinioninfo
							.ai_support_num)
						let calculate1 = Number(this.opinioninfo.ai_support_no_num) / num
						let calculate2 = Number(this.opinioninfo.ai_support_num) / num
						this.thumbup = Number(calculate1 * 100).toFixed(0)
						this.thumbdown = Number(calculate2 * 100).toFixed(0)
					} else {

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.parse {
		font-size: 24rpx;
	}

	.newsdetails {
		width: 100%;
		height: 410rpx;
		position: relative;

		.newsdetails-bg {
			width: 100%;
			height: 100%;

			.bg {
				width: 100%;
				height: 100%;
			}
		}
	}

	.newsdetails-cont {
		padding: 30rpx;

		.title {
			text {
				width: 80%;
				font-size: 36rpx;
				color: #000000;
				font-weight: 600;
			}
		}

		.time-eye {
			margin-top: 10rpx;
			color: #6f6f6f;

			image {
				width: 30rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>
